<template>
  <el-card class="box-card left">
    <el-menu default-active="0"
             class="el-menu-vertical-demo">
      <el-menu-item index="0"
                    class="text item"
                    @click="select(0)">
        <i class="el-icon-document"></i>
        <span slot="title">全部</span>
      </el-menu-item>
      <el-menu-item :index="(index+1).toString()"
                    v-for="(item,index) in list"
                    :key="item.id"
                    class="text item"
                    @click="select(item.id)">
        <i :class="item.avatar"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </el-card>
</template>

<script>
import CategoryApi from "../api/category";
export default {
  data() {
    return {
      list: "",
    };
  },
  methods: {
    select(id) {
      // 传递分类id
      this.$bus.$emit("updateData", id,1);
    },
  },
  created() {
    CategoryApi.list()
      .then((result) => {
        this.list = result.data.list;
      })
      .catch((err) => {});
  },
};
</script>
<style scoped>
.left {
  position: fixed;
  left: 100px;
  top: 80px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.text {
  font-size: 16px;
}

.item {
  height: 40px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 200px;


}
</style>